<template>
  <div class="hello">
    <div>
      <button @click="add">add</button>
      <button @click="next(-10)">pre</button>
      <button @click="next(10)">next</button>
    </div>
    <div>
      {{ list }}
    </div>
    <div class="list">
      <template v-for="(item, i) in list" :key="i">
        <input v-model="item.name" />
        <button @click="doc.list[i] = {}">reset</button> <button @click="doc.list.splice(i, 1)">X</button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListWorld",
  props: {
    msg: String
  },
  inject: ["doc"],
  data() {
    return {
      start: 0,
      end: 10
    };
  },
  watch: {
    "doc.list"(fresh, old) {
      console.log("doc", fresh, old);
    }
  },
  computed: {
    list() {
      let start = this.start;
      let end = this.end;
      return this.doc.list.slice(start, end);
    }
  },

  updated() {
    console.log("[List][updated]");
  },
  methods: {
    next(num) {
      this.start = num >= 0 ? this.end : this.start + num;
      this.end = num >= 0 ? Math.max(0, this.start + num) : this.start - num;
    },
    add() {
      this.doc.list = this.doc.list || [];
      this.doc.list.unshift({
        index: this.doc.list.length
      });
    }
  }
};
</script>
<style>
.hello {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
  /* max-height: 500px; */
  overflow: auto;
}
.list {
  overflow: auto;
}
</style>
